<div class="page-wrapper d-flex flex-column pt-4 w-100">
    <div class="container-xl">
        <div class="page-header d-print-none">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-pretitle">
                        Create / Updating
                    </div>
                    <h3 class="page-title">
                        MixDatabase
                    </h3>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body d-flex flex-row-reverse">

        <aside class="bd-sidebar sub-sidebar">
            <nav class="bd-links p-3" aria-label="Sub-section navigation">
                <div class="card">
                    <div class=" card-body">

                        <div class="btn-toolbar d-flex mb-3" role="group" aria-label="">
                            <div class="btn-group me-2">
                                <a href="/portal/mix-database/list" class="btn btn-light me-1">
                                    <i class="fa fa-chevron-left"></i>
                                </a>
                            </div>
                            <div class="btn-group flex-fill me-3">
                                <button id="btnToSubmit" type="submit" class="btn btn-primary  ms-auto">
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                        class="icon icon-tabler icon-tabler-device-floppy" width="24" height="24"
                                        viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
                                        stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <path
                                            d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2" />
                                        <circle cx="12" cy="14" r="2" />
                                        <polyline points="14 4 14 8 8 8 8 4" />
                                    </svg>
                                    <span>Save</span>
                                </button>
                            </div>
                            <div class="btn-group me-2">
                                <div class="dropdown float-lg-end ms-auto pe-1">
                                    <a href="javascript:;" class="cursor-pointer" id="dropdownTable2"
                                        data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="fa fa-ellipsis-h text-secondary" aria-hidden="true"></i>
                                    </a>
                                    <ul class="dropdown-menu px-2 py-3 ms-sm-n4 ms-n5" aria-labelledby="dropdownTable2"
                                        style="">
                                        <li>
                                            <a href="/portal/mix-database-data/list?mixDatabaseId={{viewmodel.id}}&mixDatabaseName={{viewmodel.name}}&mixDatabaseTitle={{viewmodel.title}}"
                                                class="dropdown-item border-radius-md">
                                                <svg class="svg-inline--fa fa-database fa-w-14 me-1" aria-hidden="true"
                                                    focusable="false" data-prefix="fas" width="20" height="20"
                                                    data-icon="database" role="img" xmlns="http://www.w3.org/2000/svg"
                                                    viewBox="0 0 448 512" data-fa-i2svg="">
                                                    <path fill="currentColor"
                                                        d="M448 73.143v45.714C448 159.143 347.667 192 224 192S0 159.143 0 118.857V73.143C0 32.857 100.333 0 224 0s224 32.857 224 73.143zM448 176v102.857C448 319.143 347.667 352 224 352S0 319.143 0 278.857V176c48.125 33.143 136.208 48.572 224 48.572S399.874 209.143 448 176zm0 160v102.857C448 479.143 347.667 512 224 512S0 479.143 0 438.857V336c48.125 33.143 136.208 48.572 224 48.572S399.874 369.143 448 336z">
                                                    </path>
                                                </svg>
                                                Data list
                                            </a>
                                        </li>
                                        <!-- <li>
                                            <button type="button" ng-if="isAdmin && viewmodel.id" ng-click="migrate()"
                                                class="dropdown-item border-radius-md">
                                                <svg xmlns="http://www.w3.org/2000/svg"
                                                    class="icon icon-tabler icon-tabler-database-import" width="20"
                                                    height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50"
                                                    fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                    <ellipse cx="12" cy="6" rx="8" ry="3" />
                                                    <path
                                                        d="M4 6v8m5.009 .783c.924 .14 1.933 .217 2.991 .217c4.418 0 8 -1.343 8 -3v-6" />
                                                    <path
                                                        d="M11.252 20.987c.246 .009 .496 .013 .748 .013c4.418 0 8 -1.343 8 -3v-6m-18 7h7m-3 -3l3 3l-3 3" />
                                                </svg>
                                                <span>Migrate to single table</span>
                                            </button>
                                        </li> -->
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <label class="form-label">Publish status</label>
                        <statuses status="viewmodel.status"></statuses>
                        <div class="mb-3"></div>

                        <mix-database-main model="viewmodel"> </mix-database-main>
                    </div>
                </div>
            </nav>
        </aside>

        <!-- ----------------------------------------------------------- -->
        <div class="content-body py-3 pe-3">
            <section class="" ng-init="getSingle()">
                <form ng-class="{'submitted': submitted}" ng-submit="save(viewmodel)">
                    <nav class="mb-3">
                        <div class="nav nav-tabs" id="nav-tab" role="tablist">
                            <a class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home"
                                role="tab" aria-controls="nav-home" aria-selected="true">Design database</a>
                            <a class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab"
                                aria-controls="nav-profile" aria-selected="false">Email notification</a>
                        </div>
                    </nav>
                    <div class="tab-content" id="nav-tabContent">
                        <div class="tab-pane fade show active" id="nav-home" role="tabpanel"
                            aria-labelledby="nav-home-tab">
                            <!-- <div class="card mb-5">
            <div class="card-body">
            </div>
          </div> -->

                            <!-- app-portal/components/attribute-list -->
                            <list-mix-column header="'Attributes'" columns="viewmodel.columns"
                                remove-attributes="viewmodel.removeAttributes">
                            </list-mix-column>
                        </div>
                        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                            <div class="card mb-5">
                                <div class="card-body">
                                    <mix-database-edm model="viewmodel"> </mix-database-edm>
                                </div>
                            </div>

                            <mix-template-editor folder-type="'Edms'" template="viewmodel.edmView" hide-js="'true'"
                                hide-css="'true'" ng-if="isAdmin">
                            </mix-template-editor>
                            <div class="mb-5"></div>
                            <mix-template-editor folder-type="'Forms'" template="viewmodel.formView" ng-if="isAdmin">
                            </mix-template-editor>
                            <!-- <tabs-v select-callback="selectPane(pane)" class="mb-3">
            <pane-v header="Form Layout" ng-if="isAdmin">
            </pane-v>
            <pane-v header="eDM Layout" ng-if="isAdmin">
            </pane-v>
        </tabs-v> -->
                        </div>
                    </div>
                </form>
            </section>
        </div>
    </div>
</div>